<template>
	<view class="vipinfo">
		<view class="userinfo">
			<view class="actived">
				<view class="actived_left">
					<image class="user_img" :src="userinfo.headimgurl" mode="aspectFit"></image>
					<text class="nickname">{{userinfo.nickname}}</text>
					<text class="status" v-if="userinfo.user_level_id == '0'">未开通</text>
					<view class="levels" v-if="userinfo.user_level_id == '1'">
						<image class="vip_level_icon" :src="IMGLink+'/my/vip_level_icon.png'" mode="widthFix"></image>
						<text>1</text>
					</view>
				</view>
				<view v-if="type">
					<button type="default" size="mini" class="active_btn" v-if="userinfo.user_level_id == '1'"
						@click="goPage('/pagesA/my/vips/openRecord')">我的礼包</button>
					<button type="default" size="mini" class="active_btn" v-else
						@click="goPage('/pagesA/my/vips/activeVip')">激活会员</button>
				</view>
			</view>
			<view class="nothas_info" v-if="userinfo.user_level_id == '0'">您还没有开通会员哦，开通会员享受特权</view>
			<view class="nothas_info" v-else-if="userinfo.user_level_id == '1'">
				您已享受权益会员，到期时间：{{userinfo.vip_expires_date}}</view>
			<view class="buy_vip">
				<text>购买会员礼包（到期后需要手动续费）</text>
				<view v-if="type">
					<button type="default" class="buy_btn" v-if="userinfo.user_level_id == '0'"
						@click="openCoup">立即开通</button>
					<button type="default" class="buy_btn" v-else @click="openCoup">立即续费</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "vipinfo",
		props: {
			userinfo: {
				type: Object,
				value: {}
			},
			type: { //区分是否显示“立即续费”/“我的礼包”灯
				type: String,
				value: "",
			}
		},
		data() {
			return {
				IMGLink: this.IMGLink,
			}
		},
		methods: {
			openCoup() {
				this.$emit('openCoup');
			},
			goPage(url) {
				uni.navigateTo({
					url: url
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "../my/my.scss";

	.userinfo {
		box-sizing: border-box;
		height: 364rpx;
		@include bck_img($img-link+"/my/vip-bg.png");
		font-size: 26rpx;
		color: #F7DBB2;
		padding: 30rpx 0;

		.actived {
			@include flexLayout(center, space-between);
			padding-left: 30rpx;

			&_left {
				@include flexLayout(center, flex-start);

				.nickname {
					font-size: 32rpx;
					margin: 0 10rpx;
				}

				.status {
					color: #FFFFFF;
					font-size: 24rpx;
				}

				.user_img {
					width: 76rpx;
					height: 76rpx;
					border-radius: 50%;
				}

				.levels {
					@include flexLayout(center, center);
					height: 30rpx;
					line-height: 30rpx;
					background: #EAB669;
					border-radius: 14rpx;
					color: #FFFFFF;
					font-size: 20rpx;
					padding: 0 12rpx;

					.vip_level_icon {
						width: 22rpx;
						margin-right: 4rpx;
						margin-top: 2rpx;
					}
				}
			}

			.active_btn {
				margin: 0;
				width: 80px;
				height: 25px;
				line-height: 25px;
				background: #FF4B46;
				border-radius: 12px;
				color: #FFFFFF;
				font-size: 12px;
				margin-right: 30rpx;
				padding: 0;
			}

		}

		.nothas_info {
			margin: 20rpx 0 60rpx 30rpx;
		}

		.buy_vip {
			@include flexLayout(center, space-between);
			border-top: 2rpx solid #4a4848;
			padding: 40rpx 30rpx;

			.buy_btn {
				margin: 0;
				width: 160rpx;
				height: 50rpx;
				line-height: 50rpx;
				background: linear-gradient(95deg, #FCF2D6 0%, #FFE7BD 100%);
				border-radius: 24rpx;
				color: #795B26;
				font-size: 24rpx;
			}
		}
	}
</style>
